<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../../set.jsp" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>用户管理平台</title>
<jsp:include page="../../cite.jsp" />
<link rel="stylesheet" href="${_path}/theme/theme-menu.css">
<link rel="stylesheet" href="${_path}/lib/bootstrap-select-1.10.0/css/bootstrap-select.min.css">
<script src="${_path}/lib/bootstrap-select-1.10.0/js/bootstrap-select.min.js"></script>
<script src="${_path}/lib/bootstrap-select-1.10.0/js/i18n/defaults-zh_CN.min.js"></script>
<script src="${_path}/lib/bootbox-4.4.0/bootbox.min.js"></script>
<script src="${_path}/lib/loong/loong-repopover.js"></script>
<style>
.body {
	padding-top: 40px;
}

.body .popover>.popover-content {
	color: #000;
	font-size: 12px;
}

.body .list td {
	vertical-align: middle !important;
	word-break: break-all;
	word-wrap: break-word;
}

.body .where .btn[data-target].active, .body .where-detail>.item>div>.active {
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
}

.body .where-detail>.item>label, .body .where-detail>.item>.btn-group, .body .where-detail>.item>.order {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}

.where-detail>.item>.order>.btn {
	margin-right: 2px;
}
</style>
</head>
<body>
	<jsp:include page="../../header.jsp" />
	<jsp:include page="./auth-menu.jsp?active=users" />
	<div class="body">
		<div class="panel panel-default">
			<div class="panel-body where" id="where">
				<form class="form-inline" id="query">
					<div class="input-group input-group-sm">
						<input type="text" class="form-control" placeholder="关键字" name="k" value="${param.k}" autofocus>
						<span class="input-group-btn">
							<button class="btn btn-default">
								<i class="fa fa-search"></i>
							</button>
						</span>
					</div>
					<a href="javascript:;" class="btn btn-default btn-sm" data-toggle="collapse" data-target="#where-detail" title="筛选">
						<i class="fa fa-th-large"></i>
					</a>
					<a class="btn btn-default btn-sm" href="./edit/" title="添加" data-toggle="tooltip">
						<i class="fa fa-plus"></i>
					</a>
					<a class="btn btn-default btn-sm pull-right" href="./" title="重置" data-toggle="tooltip">
						<i class="fa fa-refresh"></i>
					</a>
				</form>
				<div class="collapse where-detail" id="where-detail">
					<hr>
					<div class="item">
						<label>状态：</label>
						<div class="btn-group btn-group-sm input-select" data-toggle="buttons" value="${param.statuses}">
							<c:forEach var="status" items="${statuses}">
								<label class="btn btn-default">
									<input type="checkbox" name="status" value="${status.value}">
									${status.name}
								</label>
							</c:forEach>
							<a href="javascript:;" class="btn btn-default">
								<i class="fa fa-close"></i>
							</a>
						</div>
					</div>
					<hr>
					<div class="item">
						<label>权限：</label>
						<select class="selectpicker" name="auths" multiple value="${param.auths}">
							<c:forEach var="auth" items="${auths}">
								<option value="${auth.value}">${auth.name}</option>
							</c:forEach>
						</select>
					</div>
					<hr>
					<div class="item">
						<label>排序：</label>
						<div class="btn-group" id="order-opt">
							<c:forEach var="field" items="${order}">
								<div class="btn-group">
									<a href="javascript:;" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" for="${field.key}">${field.value}</a>
									<ul class="dropdown-menu">
										<li for="down">
											<a href="javascript:;">
												逆序
												<i class="fa fa-sort-amount-desc"></i>
											</a>
										</li>
										<li for="up">
											<a href="javascript:;">
												顺序
												<i class="fa fa-sort-amount-asc"></i>
											</a>
										</li>
									</ul>
								</div>
							</c:forEach>
						</div>
						<label>已选：</label>
						<div class="order" id="order" value="${param.order}"></div>
					</div>
					<hr>
					<div>
						<a href="javascript:;" class="btn btn-link btn-sm" id="reset">清 空</a>
						<a href="javascript:;" class="btn btn-primary btn-sm" id="ok">确 认</a>
					</div>
				</div>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-body">
				<table class="table table-hover text-center list" id="table">
					<caption>人员列表</caption>
					<thead>
						<tr>
							<td width="15%">
								<strong>用户</strong>
							</td>
							<td width="10%">
								<strong>状态</strong>
							</td>
							<td width="20%">
								<strong>权限</strong>
							</td>
							<td width="20%">
								<strong>邮箱</strong>
							</td>
							<td width="20%">
								<strong>姓名</strong>
							</td>
							<td width="15%">
								<strong>操作</strong>
							</td>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="row" items="${users.rows}">
							<tr>
								<td>${row.user}</td>
								<td>
									<c:if test="${row.status.key == 'NORMAL'}">
										<span class="label label-success">${row.status.name}</span>
									</c:if>
									<c:if test="${row.status.key == 'LOCK'}">
										<span class="label label-warning">${row.status.name}</span>
									</c:if>
									<c:if test="${row.status.key == 'CANCEL'}">
										<span class="label label-default">${row.status.name}</span>
									</c:if>
								</td>
								<td>
									<c:forEach varStatus="row_status" var="auth" items="${row.auths}">
										<c:if test="${row_status.index != 0}">/</c:if>
										${auth.name}
									</c:forEach>
								</td>
								<td>${row.email}</td>
								<td>${row.name}</td>
								<td value="${row.id}">
									<c:if test="${row.status.key != 'CANCEL'}">
										<a class="btn btn-primary btn-xs" href="./edit/${row.id}/" title="编辑" data-toggle="tooltip">
											<i class="fa fa-pencil"></i>
										</a>
										<button type="button" class="btn btn-info btn-xs row-repwd">
											<i class="fa fa-key"></i>
										</button>
										<c:if test="${row.status.key == 'NORMAL'}">
											<button type="button" class="btn btn-warning btn-xs row-lock">
												<i class="fa fa-lock"></i>
											</button>
										</c:if>
										<c:if test="${row.status.key == 'LOCK'}">
											<button type="button" class="btn btn-success btn-xs row-unlock">
												<i class="fa fa-unlock-alt"></i>
											</button>
										</c:if>
										<button type="button" class="btn btn-danger btn-xs row-remove">
											<i class="fa fa-trash"></i>
										</button>
									</c:if>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<div class="text-center">
					<jsp:include page="../../pager.jsp?${pageContext.request.queryString}">
						<jsp:param name="page" value="${users.page.getPage()}" />
						<jsp:param name="size" value="${users.page.getSize()}" />
						<jsp:param name="total" value="${users.page.getTotal()}" />
					</jsp:include>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(function() {
			initTable();
			initWhere();
			function initTable() {
				bootbox.setLocale('zh_CN');
				$('#table td>.row-lock').repopover('再次点击，锁定用户', function(n) {
					status(n.parent().attr('value'), 'LOCK');
				});
				$('#table td>.row-unlock').repopover('再次点击，解锁用户', function(n) {
					status(n.parent().attr('value'), 'NORMAL');
				});
				$('#table td>.row-remove').repopover('再次点击，注销用户', function(n) {
					status(n.parent().attr('value'), 'CANCEL');
				});
				$('#table td>.row-repwd').repopover('再次点击，重置用户密码', function(n) {
					repwd(n.parent().attr('value'));
				});
				function status(id, status) {
					$.ajax({
						url : './status/',
						type : 'post',
						dataType : 'json',
						data : {
							id : id,
							status : status
						},
						success : function(result) {
							if (result.succ == 0)
								location.reload();
							else
								bootbox.alert(result.message);
						},
						error : function() {
							bootbox.alert('网络连接失败');
							if (status == 'LOCK')
								console.log('锁定用户失败');
							else if (status == 'NORMAL')
								console.log('解锁用户失败');
							else if (status == 'CANCEL')
								console.log('用户销户失败');
						}
					});
				}
				function repwd(id) {
					$.ajax({
						url : './repwd/',
						type : 'post',
						dataType : 'json',
						data : {
							id : id
						},
						success : function(result) {
							if (result.succ == 0)
								bootbox.alert('重置成功，密码已发送至用户邮箱');
							else
								bootbox.alert(result.message);
						},
						error : function() {
							bootbox.alert('网络连接失败');
							console.log('重置用户密码失败');
						}
					});
				}
			}
			function initWhere() {
				initData();
				$('#where [data-toggle=collapse][title]').tooltip({
					trigger : 'hover'
				});
				$('#reset').bind('click', function() {
					resetClick();
				});
				$('#ok').bind('click', function() {
					$('#query').submit();
				});
				$('#query').submit(function() {
					submitClick();
					return false;
				});
				$('#where .input-select>a.btn').bind('click', function() {
					$(this).parent().children('label.btn').each(function(i, n) {
						$(n).removeClass('active').children().prop('checked', false);
					});
				});
				$('#where .selectpicker').selectpicker({
					style : 'btn-default btn-sm',
					doneButton : true,
					actionsBox : true,
					size : 6
				});
				$('#order-opt ul.dropdown-menu>li').bind('click', function() {
					orderClick($(this));
				});
				function initData() {
					var has = false;
					$('#where .input-select').each(function() {
						var select = $(this);
						var value = select.attr('value');
						if (value.length != 0)
							$.each(value.split(','), function(i, n) {
								select.children('label').children('input[value=' + n + ']').each(function() {
									$(this).prop('checked', true).parent().addClass('active');
									has = true;
								});
							})
					});
					$('#where .selectpicker').each(function() {
						var select = $(this);
						var value = select.attr('value');
						if (value.length != 0)
							$.each(value.split(','), function(i, n) {
								select.children('option[value=' + n + ']').each(function() {
									$(this).attr('selected', 'selected');
									has = true;
								});
							})
					});
					var order = $('#order').attr('value');
					if (order.length != 0)
						$.each(order.split(','), function(i, n) {
							var cv = n.split('-');
							addOrderCol(cv[0], cv[1], $('#order-opt a.dropdown-toggle[for=' + cv[0] + ']').text());
							has = true;
						});
					if (has)
						$('#where a[data-target="#where-detail"]').addClass('active');
				}
				function orderClick(li) {
					var btn = li.parent().prev('a.dropdown-toggle');
					addOrderCol(btn.attr('for'), li.attr('for'), btn.text());
				}
				function addOrderCol(key, value, name) {
					$('#order a[name=' + key + ']').remove();
					var btn = $('<a href="javascript:;"></a>').bind('click', function() {
						$(this).remove();
					}).addClass('btn btn-info btn-xs').attr('name', key).attr('value', value).append(name).append(
							' <i class="fa fa-caret-' + value + '"></i>');
					$('#order').append(btn);
				}
				function resetClick() {
					$('#where input[name=k]').val('');
					$('#where input:checked').prop('checked', false).parent().removeClass('active');
					$('#where .selectpicker').selectpicker('deselectAll');
					$('#order').empty();
				}
				function submitClick() {
					var k = $('#where input[name=k]').val();
					var auths = getSelected('auths');
					var statuses = getChecked('status');
					var order = getOrder();
					var url = buildUrl([ [ 'k', k ], [ 'auths', auths ], [ 'statuses', statuses ], [ 'order', order ] ]);
					if (url == null)
						location.href = './';
					else
						location.href = url;
					function getSelected(name) {
						var value = null;
						$.each($('#where .selectpicker[name=' + name + ']').selectpicker('val'), function(i, n) {
							if (value == null)
								value = n;
							else
								value += ',' + n;
						});
						return value;
					}
					function getChecked(name) {
						var value = null;
						$('#where input[name=' + name + ']:checked').each(function() {
							if (value == null)
								value = $(this).val();
							else
								value += ',' + $(this).val();
						});
						return value;
					}
					function getOrder() {
						var order = null;
						$('#order>.btn').each(function() {
							if (order == null)
								order = $(this).attr('name') + '-' + $(this).attr('value');
							else
								order += ',' + $(this).attr('name') + '-' + $(this).attr('value');
						});
						return order;
					}
					function buildUrl(params) {
						var url;
						$.each(params, function(i, n) {
							if (n[1] == null || n[1].length == 0)
								return;
							if (url == null)
								url = '?';
							else
								url += '&';
							url += (n[0] + '=' + n[1]);
						});
						return url;
					}
				}
			}
		});
	</script>
</body>
</html>